<template>
  <div class="resForm">
    <el-form
      :model="regForm"
      status-icon
      :rules="regFormRules"
      ref="resRuleForm"
    >
      <el-form-item  prop="username">
        <el-input type="text" v-model="regForm.username" placeholder="请输入手机号/用户名"></el-input>
      </el-form-item>
      <el-form-item prop="confirmNum">
          <el-input placeholder="验证码" v-model="regForm.confirmNum" type="text">
                <el-button slot="append" @click="sendConfirm"> 发送验证码</el-button>
          </el-input>
      </el-form-item>
      <el-form-item  prop="nickname">
        <el-input type="text" v-model="regForm.nickname" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item  prop="password">
        <el-input type="password" v-model="regForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item  prop="secpassword">
        <el-input type="password" v-model="regForm.secpassword" placeholder="确认密码"></el-input>
      </el-form-item>
      <el-form-item class="res">
        <el-button type="primary" @click="submitForm">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    var confirmPassword = (rule, value, callback) => {
      if (this.regForm.password !== this.regForm.secpassword) {
        callback(new Error('请再次输入相同密码'))
      }
      callback()
    }
    var confirmNum = (rule, value, callback) => {
      const reg = /^[0-9]{6}$/
      console.log(value)
      if (!reg.test(value)) {
        callback(new Error('请输入正确位数验证码'))
      } else if (value !== this.bgcConfirmNum) {
        callback(new Error('请输入手机信息的验证码'))
      }
      callback()
    }
    return {
      regForm: {
        username: '',
        password: '',
        nickname: '',
        secpassword: '',
        confirmNum: ''
      },
      bgcConfirmNum: '',
      confirmNum: '',
      regFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        secpassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: confirmPassword, trigger: 'blur' }
        ],
        confirmNum: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { validator: confirmNum, trigger: 'blur' }
        ]
      }
    }
  },
  created () {

  },
  methods: {
    sendConfirm () {
      this.$http.post('/captchas', { tel: this.regForm.username }).then(res => {
        this.$message.success(`获取成功，您的验证码是${res.data.code}`)
        this.bgcConfirmNum = res.data.code
      })
    },
    submitForm () {
      this.$refs.resRuleForm.validate(async validator => {
        const { data } = await this.$http.post('/accounts/register', {
          username: this.regForm.username,
          nickname: this.regForm.nickname,
          captcha: this.regForm.confirmNum,
          password: this.regForm.password
        })
        console.log(data)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.resForm{
    width: 350px;
    margin: 0 atuo;
    position: relative;
    .el-input{
        width: 350px;
    }
    .res{
        width: 350px;
        button{
            width: 100%;
        }
    }
    .forgetPsw{
        position: absolute;
        right: 0;
        bottom: 40px;
        color: lightblue;
        font-size: 12px;
        cursor: pointer;
    }
}
</style>
